<!-- 141 -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button
        type="primary"
        :loading="searchBtnLoading"
        @click="handleSearch"
        >{{ $t("common_query") }}</a-button
      >
    </a-space>
    <t-query-form
      layout="inline"
      group="ViewMaterialHistory"
      ref="queryForm"
      :rules="rules"
      :model="queryForm"
    >
      <a-form-item :label="$t('T9_shopId')" name="shopId">
        <a-select
          v-model:value="queryForm.shopId"
          :placeholder="$t('common_pleaseSelect')"
          class="select-width"
        >
          <a-select-option
            v-for="item in options.shopIdList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('T9_materialId')" name="materialId">
        <a-input
          v-model:value="queryForm.materialId"
          :placeholder="$t('valid_required')"
        />
      </a-form-item>
    </t-query-form>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-1"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_cstList")
      }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button>{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <t-table :loading="searchBtnLoading" :data="tableData">
      <t-column field="materialId" :title="$t('T9_materialId')" />
      <t-column field="eventTime" :title="$t('T9_eventTime')" />
      <t-column field="eventName" :title="$t('T9_eventName')" />
      <t-column field="eventUser" :title="$t('T9_eventUser')" />
      <t-column field="mainmaterialname" :title="$t('T9_mainmaterialname')" />
      <t-column field="qty" :title="$t('T9_qty')" />
      <t-column field="state" :title="$t('T9_state')" />
      <t-column field="processState" :title="$t('T9_processState')" />
      <t-column field="holdState" :title="$t('T9_holdState')" />
      <t-column
        field="materialLocationName"
        :title="$t('T9_materialLocationName')"
      />
      <t-column field="uintId" :title="$t('T9_uintId')" />
      <t-column field="subUnitId" :title="$t('T9_subUnitId')" />
      <t-column field="headId" :title="$t('T9_headId')" />
      <t-column field="iceCount" :title="$t('T9_iceCount')" />
      <t-column field="warmCount" :title="$t('T9_warmCount')" />
      <t-column field="measuredValue" :title="$t('T9_measuredValue')" />
      <t-column field="materialSpec" :title="$t('T9_materialSpec')" />
      <t-column field="shopId" :title="$t('T9_shopId')" />
      <t-column field="bayId" :title="$t('T9_bayId')" />
      <t-column field="eventComment" :title="$t('T9_eventComment')" />
      <t-column field="consumerLotName" :title="$t('T9_consumerLotName')" />
      <t-column field="consumerPo" :title="$t('T9_consumerPo')" />
      <t-column field="consumerPoVer" :title="$t('T9_consumerPoVer')" />
      <t-column field="cancelFlag" :title="$t('T9_cancelFlag')" />
      <t-column field="owner" :title="$t('T9_owner')" />
      <t-column field="manufacture" :title="$t('T9_manufacture')" />
      <t-column field="sapId" :title="$t('T9_sapId')" />
      <t-column field="groupId" :title="$t('T9_groupId')" />
      <t-column field="combineMaterial" :title="$t('T9_combineMaterial')" />
      <t-column field="weight" :title="$t('T9_weight')" />
      <t-column field="validDate" :title="$t('T9_validDate')" />
      <t-column field="interfaceDate" :title="$t('T9_interfaceDate')" />
      <t-column field="prTestState" :title="$t('T9_prTestState')" />
    </t-table>
  </div>
</template>

<script>
  import * as api from '@/api/common'
  import { shopIdList } from '@/views/options'

  const basicParams = {
    dtoName: 'ViewCstHistoryDTO',
    queryId: 'GetConsumableHistory',
    version: '80002',
    menuName: 'viewMaterialHistory',
    usage: 'getMaterialHistory'
  }
  export default {
    name: 'ViewMaterialHistory',
    data() {
      return {
        searchBtnLoading: false,
        list: {
          tableData: []
        },
        queryForm: {
          materialId: '',
          shopId: undefined
        },
        options: {
          shopIdList
        },
        rules: {
          shopId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ],
          materialId: [
            {
              required: true,
              message: this.$t('valid_required'),
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            const params = { ...this.queryForm, ...basicParams }
            api
              .getList(params)
              .then((res) => {
                this.list.tableData = res || []
                this.searchBtnLoading = false
              })
              .catch((error) => {
                this.searchBtnLoading = false
                console.error(error)
              })
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
    }
  }
</script>
<style lang='less' scoped>
.select-width {
  width: 120px;
}
</style>
